<script setup lang="ts">
import { reactive } from 'vue';
import Echarts from '@/components/ReEcharts/index.vue';

const pieData = reactive([
	{
		name: '男',
		value: 6
	},
	{
		name: '女',
		value: 2
	}
]);

const option = reactive({
	color: ['#18F6F8', '#288CFC'],
	legend: {
		top: '10px',
		icon: 'circle',
		color: '#555'
	},
	tooltip: {
		confine: true,
		trigger: 'item',
		formatter: '{b} : {c} 个'
	},
	series: [
		{
			avoidLabelOverlap: false,
			type: 'pie',
			//roseType: 'area', // 玫瑰图
			center: ['50%', '50%'],
			radius: ['20%', '60%'],
			label: {
				formatter: '{b}',
				fontSize: 14
			},
			labelLine: {
				length: 10,
				length2: 30
			},
			data: pieData
		}
	]
});

const option_2 = reactive({
	color: ['deepskyblue', 'orangered'],
	legend: {
		top: '10px',
		icon: 'circle',
		color: '#555'
	},
	tooltip: {
		confine: true,
		trigger: 'item',
		formatter: '{b} : {c} 个'
	},
	series: [
		{
			avoidLabelOverlap: false,
			type: 'pie',
			roseType: 'area', // 玫瑰图
			center: ['50%', '50%'],
			radius: ['20%', '60%'],
			label: {
				formatter: '{b}',
				fontSize: 14
			},
			labelLine: {
				length: 10,
				length2: 30
			},
			data: pieData
		}
	]
});


const option_adopt = reactive({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true
			}
		}
	},
	xAxis: {
		data: [
			'01月',
			'02月',
			'03月',
			'04月',
			'05月',
			'06月',
			'07月',
			'08月',
			'09月',
			'10月',
			'11月'
		],
		axisLine: {
			show: true, //隐藏X轴轴线
			lineStyle: {
				color: '#eee',
				width: 1
			}
		},
		axisTick: {
			show: true, //隐藏X轴刻度
			alignWithLabel: true
		},
		axisLabel: {
			show: true,
			color: '#333', //X轴文字颜色
			fontSize: 14
		}
	},
	yAxis: [
		{
			type: 'value',
			name: '人数',
			nameTextStyle: {
				color: '#333',
				fontSize: 14
			},
			splitLine: {
				show: true,
				lineStyle: {
					width: 1,
					color: '#eee'
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: true,
				color: '#333',
				fontSize: 14
			}
		}
	],
	series: [
		{
			name: '领养人数',
			type: 'line',
			smooth: true,
			barWidth: 18,
			itemStyle: {
				color: {
					type: 'linear',
					colorStops: [
						{
							offset: 0,
							color: '#52A7FF' // 0% 处的颜色
						},
						{
							offset: 1,
							color: '#409EFF' // 100% 处的颜色
						}
					]
				}
			},
			data: [2, 3, 10, 8, 4, 7,12, 11, 6,2,4]
		}
	]
});

const option_child = reactive({
	tooltip: {
		trigger: 'axis',
		axisPointer: {
			type: 'shadow',
			label: {
				show: true
			}
		}
	},
	xAxis: {
		data: [
			'01月',
			'02月',
			'03月',
			'04月',
			'05月',
			'06月',
			'07月',
			'08月',
			'09月',
			'10月',
			'11月'
		],
		axisLine: {
			show: true, //隐藏X轴轴线
			lineStyle: {
				color: '#eee',
				width: 1
			}
		},
		axisTick: {
			show: true, //隐藏X轴刻度
			alignWithLabel: true
		},
		axisLabel: {
			show: true,
			color: '#333', //X轴文字颜色
			fontSize: 14
		}
	},
	yAxis: [
		{
			type: 'value',
			name: '人数',
			nameTextStyle: {
				color: '#333',
				fontSize: 14
			},
			splitLine: {
				show: true,
				lineStyle: {
					width: 1,
					color: '#eee'
				}
			},
			axisTick: {
				show: false
			},
			axisLine: {
				show: false
			},
			axisLabel: {
				show: true,
				color: '#333',
				fontSize: 14
			}
		}
	],
	series: [
		{
			name: '领养人数',
			type: 'bar',
			smooth: true,
			barWidth: 18,
			itemStyle: {
				color: {
					type: 'linear',
					colorStops: [
						{
							offset: 0,
							color: '#52A7FF' // 0% 处的颜色
						},
						{
							offset: 1,
							color: '#409EFF' // 100% 处的颜色
						}
					]
				}
			},
			data: [2, 4, 10, 8, 4, 7,15, 11, 6,8,4,9]
		}
	]
});

//词云图
let valueList = [30, 50, 60, 65, 70, 80, 90, 100, 120];
let colorList = ['#FAAD14', '#13C2C2', '#14A8FF', '#23D688', '#397EF0'];
let fontSizeList = [12, 14, 16, 18];
let data = [];

let nameList = reactive([
	'Tom',
	'Ross',
	'Jack',
	'John',
	'王思琦',
	'Lucy',
	'Jenny',
	'王二小',
	'武义'
]);
nameList.forEach((item, index) => {
	let valueIndex = index % valueList.length;
	let colorIndex = index % colorList.length;
	let fontSizeIndex = index % fontSizeList.length;

	data.push({
		name: item,
		value: valueList[valueIndex],
		label: {
			color: colorList[colorIndex],
			fontSize: fontSizeList[fontSizeIndex]
		}
	});

});

const option_ciyun = reactive({
	color: colorList,
	graphic: [
		{
			id: 'baPng',
			type: 'image',
			left: 'center',
			top: 'center',
			style: {
				image:
					'',
				width: '400',
				height: '400'
			}
		}
	],
	series: [
		{
			type: 'graph',
			layout: 'force',
			force: {
				repulsion: 85, // 节点之间的斥力因子
				edgeLength: 85, //边的两个节点之间的距离
				layoutAnimation: true,
				friction: 0.3
			},
			roam: false,
			symbol: '',
			symbolSize: 0,
			label: {
				show: true,
				color: 'auto'
			},
			draggable: false,
			data: data
		}
	]
	});
</script>

<template>
	<div class="ele-body" style="background-color: #fff;">
     <a-row>
		<a-col :lg="8" :md="8" :sm="24" :xs="24">
			<div>
				<h3>这些可爱的她们</h3>
			<hr>
			<div style="height: 300px;">
				<Echarts :option="option_ciyun" />
			</div>
			</div>
		</a-col>
		<a-col :lg="8" :md="8" :sm="24" :xs="24">
			<div>
				<h3>孤儿男女比例统计</h3>
			<hr>
			<div style="height: 300px;">
				<Echarts :option="option_2" />
			</div>
			</div>
		</a-col>
		<a-col :lg="8" :md="8" :sm="24" :xs="24">
			<div>
				<h3>孤儿数量统计</h3>
			<hr>
			<div style="height: 300px;">
				<Echarts :option="option_child" />
			</div>
			</div>
		</a-col>
		
	  </a-row>
	  <a-row>
		<a-col :lg="8" :md="8" :sm="24" :xs="24">
			<div>
				<h3>孤儿领养比例统计</h3>
			<hr>
			<div style="height: 300px;">
				<Echarts :option="option" />
			</div>
			</div>
		</a-col>
		<a-col :lg="16" :md="16" :sm="24" :xs="24">
			<div>
				<h3>物品捐赠数量统计</h3>
			<hr>
			<div style="height: 300px;">
				<Echarts :option="option_adopt" />
			</div>
			</div>
		</a-col>
	  </a-row>
	</div>
</template>
<style scoped>
	body{
		background-color: #fff;
	}
</style>
